<!--  -->
<template>
  <div>
   <div class="header">
      <slot name="header" :user="user"></slot>
   </div>

   <div class="box">111</div>
   <div class="box2">
      
   </div>

   <div class="footer">
      <slot name="footer"></slot>
   </div>
  
  
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'

const user=ref({
    name:"张三",
    age:18
})

</script>
<style scoped>

 .header{
    width: 100%;
    height: 100px;
    background: skyblue;
 }
 .footer{
    width: 100%;
    height: 100px;
    background: yellow;
 }
</style>